
<!-- 
All rights Reserved, Designed By www.youyacao.com 
@Description:详细播放页
@author:成都市一颗优雅草科技有限公司     
@version V3.0
@松鼠聚合直播系统
注意：本前端源码遵循 蜻蜓优雅草产品开源授权协议，本内容仅限于个人参考，禁止用于其他的商业用途
需要商业用途或者定制开发等可访问songshu.youyacao.com   联系QQ:422108995 23625059584

 -->











<template>
	<view style="overflow: hidden; height: 100vh;">
		<video id="myVideo" 
				:src="playAddress" 
				:autoplay="true" 
				:controls="showControls" 
				:enable-progress-gesture="showControls" 
				:objectFit="fitType" 
				style="width: 100%; height: 100vh;background: #000000;">
		</video>
		<cover-view class="text-ad" @click="openUrl(adText.link)" v-if="adText.text">{{adText.text}}</cover-view>
		<cover-view class="text-system-tip" v-if="systemText.text">系统通知:</cover-view>
		<cover-view class="text-system" @click="openUrl(systemText.link)" v-if="systemText.text">{{systemText.text}}</cover-view>
		<cover-view class="collect-btn" v-if="palyInfo.id" @click="collectVideo(palyInfo.id)">{{collectTitle}}</cover-view>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	export default {
		components: {uniIcons},
		data() {
			return {
				isLogin:false,
				palyInfo:{},
				fitType:"fill",
				adImage:{img:"../../static/ad.gif",link:""},
				adText:{text:"",link:""},
				systemText:{text:"",link:""},
				landscape:false,
				backIcon:"﹤",
				showControls:false,
				playAddress:"",
				collectTitle:"💚",
				context:null
			}
		},
		onReady: function() {
		    this.context = uni.createVideoContext('myVideo');
		},
		onShow(){
			this.isLogin = this.appInfo.isLogin();
			if(!this.isLogin){
				uni.navigateTo({
					url:"../login/login"
				});
			}
		},
		onLoad(option){
			this.fitType = "contain";
			if(typeof option.video != "undefined"){
				this.showControls =  true;
				//this.fitType = "contain";
			}
			if(this.appInfo.playInfo){
				this.palyInfo = this.appInfo.playInfo;
				if(this.palyInfo.liked) this.collectTitle = "❤";
				setTimeout(()=>{
					uni.$emit("play",this.palyInfo)
				},50);
			}
			var that = this;
			try{
				this.request.get({
					url:"index.php/index/index/canplay?id="+(this.appInfo.playInfo.id ? this.appInfo.playInfo.id : 0),
					success:(res)=>{
					  if(res.data.code != 1){
						  uni.showModal({
						  	showCancel:false,
							title:"提示",
							content:res.data.msg,
							success:()=>{
								uni.navigateBack({
									delta:1
								});
							}
						  });
					  }else{
						that.doPlay();
						
						if(typeof res.data.data.adImage != 'undefined'){
						  uni.$emit("update_adimage",res.data.data.adImage);
						}
						if(typeof res.data.data.adText != 'undefined'){
						  that.adText = res.data.data.adText;
						}
						if(typeof res.data.data.systemText != 'undefined'){
						  that.systemText = res.data.data.systemText;
						}
					  }
					}
				});
			}catch(e){
				uni.showModal({
					showCancel:false,
					title:"提示",
					content:"系统出错",
					success() {
						uni.navigateBack({
							delta:1
						});
					}
				});
			}
			
			
			
		},
		methods: {
			goBack:function () {
				uni.navigateBack({
					delta:1
				})
			},
			openUrl:function(url){
				if(url) plus.runtime.openURL(url);
			},
			doPlay:function(){
				this.playAddress = this.palyInfo.address;
				if (!this.playAddress) {
					this.playAddress = this.palyInfo.adress;
				}
				if(this.context) this.context.play();
			},
			collectVideo:function (id) {
				this.request.get({
					url:"index.php/index/member/collect?id="+id,
					success:(res)=>{
						if(res.data.code == 1){
							this.palyInfo.liked = !this.palyInfo.liked;
							this.collectTitle = this.palyInfo.liked ? '❤' : '💚';
						  uni.showToast({
						  	icon:"none",
							title:res.data.msg
						  })
						}else{
							uni.showModal({
								showCancel:false,
								title:"提示",
								content:res.data.msg
							});
						}
					}
				});
			}
		}
	}
</script>

<style>
   .title-nav-box{
	  width: 12px;
	  height: 22px;
	  position: absolute;
	  left: 15px;
	  top:50px
   }
  
  .image-ad{
	  width: 60px;
	  height:60px;
	  position: absolute;
	  top: 60px;
	  right: 20px;
  }
  .text-ad{
	  color: #FFFFFF;
	  position: absolute;
	  top: 90px;
	  left: 20px;
	  margin-right: 20px;
	  font-size: 16px;
  }
  .text-system-tip{
	position: absolute;
	font-size: 16px;
	color: #a00000;
	bottom: 95px;
	left: 20px;
  }
  .text-system{
	  position: absolute;
	  font-size: 16px;
	  color: white;
	  bottom: 70px;
	  left: 20px;
	  max-width: 400rpx;
  }
  .collect-btn{
	  position: absolute;
	  font-size: 36px;
	  color: #FFFFFF;
	  bottom: 70px;
	  right: 20px;
  }
</style>
